<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-07 15:32:25
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-27 14:13:38
 * @FilePath: /bangand-low-code/src/layouts/components/LayoutContent.vue
 * @Description: 布局内容部分
-->
<template>
  <div class="p-content-layout" :class="layoutClass">
    <div v-if="isShowShowPlaceholderDom" class="p-content-layout_place"></div>
    <multi-tab v-if="multiTab" class="p-content-layout_multi-tab" :class="[navTheme]"></multi-tab>
    <div class="p-content-layout__content x-p-xs" :class="contClass">
      <router-view v-if="reloadPage" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { objectUtils } from '@/utils';
import { appLatyouMixin } from '@/mixins/app-layout-mixin';
import defaultSettings from '@/config/defaultSettings';

export default {
  // 组件的名字或者页面的名字
  name: 'LayoutContent',
  mixins: [appLatyouMixin],
  // 加载组件
  components: {},
  // 父级组件传过来的值
  props: {},
  // 页面数据
  data() {
    return {};
  },
  computed: {
    // 是否显示占位
    isShowShowPlaceholderDom() {
      return this.fixedHeader;
    },

    layoutClass() {
      if (!defaultSettings.isAScreen) return [];

      return ['flex-col', 'x-height-100', this.navTheme];
    },

    // 内容区的class
    contClass() {
      if (!defaultSettings.isAScreen) return [];

      return ['main', 'x-flex-grow', 'x-height-flex-100'];
    },

    // 内容区的样式
    contStyle() {
      if (!defaultSettings.isAScreen) return {};

      let [cont] = document.getElementsByClassName('p-content-layout__content');
      return {
        height: `calc(100vh - ${(cont?.offsetTop || 0) + 12}px)`
      };
    }
  },
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {}
};
</script>

<style lang="less" scoped>
.p-content-layout {
  margin-left: 1px;

  .ant-pro-multi-tab {
    margin: 0;
  }

  &_place {
    height: @layout-header-height;
  }
}
</style>
